{% extends "index.html" %}

{% block content %}
<div class="page-header">
  <h1>Opencv, Webrtc, Python and Websockets</h1>
</div>
<div class="row">
  <div class="span5">
    <!--video id="live" width="320" height="240" autoplay></video -->
    <video id="live" width="640" height="480" autoplay></video>
    <canvas width="320" id="canvas" height="240" ></canvas>
  </div>
  <div class="span5">
    <div id="train">
      <form id="input" class="form-horizontal">
          <label for="name">I dont seem to recognize you, whats your name?</label>
          <input type="text" name="name" id="name" value="" />
          <button type="submit" class="btn" id="start">Ok</button>
      </form>
      <div id="training" class="progress progress-striped active">
        <div class="bar" style="width: 20%;">Saving images...</div>
      </div>
    </div>
    <div id="predict">
      <h2 id="name-of-face"></h2>
      <pre class="prettyprint">
      </pre>
      <label class="checkbox">
        <input type="checkbox" id="show-face" />Show face?
       </label>
      <label class="checkbox">
        <input type="checkbox" id="keep-predicting" />Keep predicting (don't retrain)?
       </label>
    </div>
  </div>
</div>
{% end %}

{% block scripts %}
<script src="{{ static_url("scripts/harvest.js") }}" type="text/javascript"></script>
{% end %}
